<template>
  <div>
    <nav-bar title="购物车"/>
      <div class="wrap">
        <div class="items">
          <div class="item" v-for="item in items" :key="item.id">
          <van-swipe-cell>
            <div class="_item">
              <van-checkbox
                @change="changeItemSelected(item.key, item.selected)"
                v-model="item.selected"/>
                <van-card
                  :num="item.number"
                  :price="item.price"
                  :title="item.name"
                  :thumb="item.pic"
                >
                <template #footer>
                  <van-stepper
                    v-model="item.number"
                    @change="changeNum(item.key, item.number)"/>
                </template>
              </van-card>
            </div>
            <template #right>
              <van-button
              @click="delItem(item.key)"
              square text="删除" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
        </div>
       </div>
      </div>
      <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    <tabbar/>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar.vue'
import Tabbar from '../../components/Tabbar.vue'
import { mapActions, mapState, mapMutations } from 'vuex'
import { setCartNum, delCateItem, setItemSelected } from '@api'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      token: localStorage.getItem('token')
      // items: [],
      // // 总价格
      // total: 0
    }
  },
  created () {
    this.get_cart()
  },
  methods: {
    changeItemSelected (key, selected) {
      // 修改商品的选中状态
      setItemSelected({
        key,
        selected,
        token: this.token
      }).then(res => {
        if (res.data.code === 0) {
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }
      })
    },
    delItem (key) {
      // 点击修改商品数量
      // 弹出确认框
      Dialog.confirm({
        title: '删除',
        message: '您确认要删除吗？'
      })
        .then(() => {
          delCateItem({
            // 确认就删除商品
            key,
            token: this.token
          }).then(res => {
            if (res.data.code === 700) {
              this.init_cart_info({
                items: [],
                total: 0
              })
            }
            if (res.data.code === 0) {
              this.init_cart_info({
                items: res.data.data.items,
                total: res.data.data.price
              })
            }
          })
        })
    },
    changeNum (key, number) {
      // 点击修改商品的数量
      setCartNum({
        key,
        number,
        token: this.token
      }).then(res => {
        if (res.data.code === 0) {
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }

        // if(res.data.code === 0)
      })
    },
    onSubmit () {
      // 提交订单
      this.$router.push('/confirmOrder')
    },
    // 数据存储在vuex中 调用actions 请求购物车数据
    ...mapActions('cart', ['get_cart']),
    ...mapMutations('cart', ['init_cart_info'])
  },
  computed: {
    ...mapState({
      items: state => state.cart.items,
      total: state => state.cart.total
    }),
    itemkeys () {
      const keys = []
      this.items.forEach(item => {
        keys.push(item.key)
      })
      return keys
    },
    allChecked: {
      // 全选状态
      get () {
        // var allChecked = this.items.every(function(item){
        //     return item.selected
        // })
        // return allChecked
        return this.items.every(item => item.selected)
      },
      set (val) {
        // 在set中修改依赖 发送请求将所有商品选中状态变成false
        // this.items[{key}, {key}] [key, key]
        setItemSelected({
          key: this.itemkeys.join(),
          selected: val,
          token: this.token
        }).then(res => {
          if (res.data.code === 0) {
            this.init_cart_info({
              items: res.data.data.items,
              total: res.data.data.price
            })
          }
        })
      }
    }
  },
  components: {
    Tabbar,
    NavBar
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 100px;
  .delete-button {
    height: 100%;
  }
  ._item{
    display: flex;
    .van-checkbox{
      padding: 0 5px;
      background-color: #fafafa;
    }
    .van-card{
      flex: 1;
    }
  }
}
.van-submit-bar{
  bottom: 50px;
}
</style>
